<template>
  <div>
    <div id="myChar4" style="width: 422px;height: 310px;"></div>
  </div>
</template>

<script>
export default {
    props: {
        chinaCities:{
			type:Object,
			default:() => {}
		}
    },
    data() {
        return {
            
        }
    },
	mounted() {
		this.drawMap()
	},
    methods: {
		drawMap(){
			var data = this.chinaCities
			console.log(this.chinaCities);
			this.$echarts.registerMap('china', data);
			// 基于准备好的dom，初始化echarts实例
			var chartDom = document.getElementById('myChar4');
			let myChar4 = this.$echarts.init(chartDom)
			var mydata = [
				{
					name:'黑龙江',
					value:100
				},
				{
					name:'天津',
					value:100
				},
				{
					name:'河北',
					value:100
				},
				{
					name:'广东',
					value:100
				},
				
			]
			// 绘制图表
			myChar4.setOption({
				/* backgroundColor:'#ffffff',
				title:{
					text:'全国地图',
					subtext:'纯属虚构',
					x:'center'
				},
				tooltip:{
					trigger:'item'
				},
				visualMap:{
					show:false,
					x:'left',
					y:'bottom',
					splitList:[
						{
							start:500,end:600
						},
						{
							start:400,end:500
						},
						{
							start:300,end:400
						},
						{
							start:200,end:300
						},
						{
							start:100,end:200
						},
						{
							start:0,end:100
						}
					],
					color:['#66CC33','#00FF00','#66FF33','#339900','#33CC00','#00CC00']
				},
				series:[
					{
						name:'随机数据',
						type:'map',
						mapType:'china',
						roam:true,
						label:{
							normal:{
								show:false
							},
							emphasis:{
								show:false
							}
						},
						data:mydata
					}
				] */
				geo: {
				    map: 'china',
				},
				series: [{
					zoom:1,
					selectedMode:'multiple',
					type: 'map',
					map: 'china',
					// roam:true,	//可拖动副本地图
					label:{
						// show:false
					},
					select:{
						label:{
							color:'#496db3',
							backgroundColor:'rgba(0,0,0,0.7)',
							fontSize:12,
							width:30,
							height:20,
							borderRadius:3,
							verticalAlign:'middle'
						}
					},
					itemStyle:{
						areaColor:'#58dc9f'
					},
					emphasis:{
						label:{
							show:true
						},
						itemStyle:{
							areaColor:'#2b91b7'
						}
					},
					data: [
						{
							name: '上海',
							selected: true,	// 填充地图上重庆区域
							select:{
								itemStyle:{
									areaColor:'#e1d77b'
								}
							}
						}, 
						{
							name: '青海',
							selected: true,	// 填充地图上重庆区域
							select:{
								itemStyle:{
									areaColor:'#e1d77b'
								}
							}
						}, 
						{
							name: '安徽',
							selected: true,	// 填充地图上重庆区域
							select:{
								itemStyle:{
									areaColor:'#e1d77b'
								}
							}
						}, 
						{
							name: '浙江',
							selected: true,	// 填充地图上重庆区域
							select:{
								itemStyle:{
									areaColor:'#e1d77b'
								}
							}
						}, 
						{
							name: '江西',
							selected: true,	// 填充地图上重庆区域
							select:{
								itemStyle:{
									areaColor:'#e1d77b'
								}
							}
						}, 
						{
							name: '福建',
							selected: true,	// 填充地图上重庆区域
							select:{
								itemStyle:{
									areaColor:'#e1d77b'
								}
							}
						}, 
						{
							name: '四川',
							selected: true,	// 填充地图上重庆区域
							select:{
								itemStyle:{
									areaColor:'#eb5672'
								}
							}
						},
						{
							name: '广东',
							selected: true,	// 填充地图上重庆区域
							select:{
								itemStyle:{
									areaColor:'#eb5672'
								}
							}
						} 
					]
				}]
			});
		}
    }
}
</script>
<style scoped lang="scss">
	#myChar4{
		margin: 0 auto;
	}
</style>
